<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>无标题文档</title>
		<link href="../../../static/css/style.css" rel="stylesheet" type="text/css" />
		<link href="../../../static/css/select.css" rel="stylesheet" type="text/css" />

		<script type="text/javascript" src="../../../static/js/jquery.js"></script>
		
		<script type="text/javascript" src="../../../static/js/jquery.idTabs.min.js"></script>
		<script type="text/javascript" src="../../../static/js/select-ui.min.js"></script>
		<script type="text/javascript" src="../../../static/editor/kindeditor.js"></script>

		<script type="text/javascript">
		$(document).ready(function(e) {
		    $(".select1").uedSelect({
				width : 200		  
			});
			
		});
		</script>
		<script type="text/javascript">
			$(document).ready(function(){
			  $(".click").click(function(){
			  $(".tip").fadeIn(200);
			  });
			  
			  $(".tiptop a").click(function(){
			  $(".tip").fadeOut(200);
			});
			
			  $(".sure").click(function(){
			  $(".tip").fadeOut(100);
			});
			
			  $(".cancel").click(function(){
			  $(".tip").fadeOut(100);
			});
			
			});
		</script>

	</head>

	<body>

		<div class="place">
			<span>位置：</span>
			<ul class="placeul">
				<li><a href="#">人事管理</a></li>
				<li><a href="#">员工管理</a></li>
			</ul>
		</div>

		<div class="rightinfo" id="app">

			<ul class="prosearch">
				<li>
					<label>查询：</label><i>用户名</i>
					<a>
						<input name="name" type="text" class="scinput" />
					</a><i>所属部门</i>
					<a>
						<select class="select1 deptName">
							<option>请选择</option>
							<option  v-for="one in dept">{{one.deptName}}</option>
							</select>
					</a>
								
				</li>
				<li>
					<label>是否在职：</label>
					<input name="staffStatus" type="radio" value="" checked="checked" />&nbsp;是&nbsp;&nbsp;
					<input name="staffStatus" type="radio" value="" />&nbsp;否
				</li>
				<a>
					<input name="" type="button" class="sure" value="查询" @click="getStaffList()" />
				</a>
				<a>
					<input name="" type="button" class="sure" value="新增员工" onclick="toStaffAdd()" />
				</a>
			</ul>

			<div class="formtitle1"><span>员工列表</span></div>

			<table class="tablelist">
				<thead>
					<tr>
						<th>员工编号<i class="sort"><img src="../../../static/images/px.gif" /></i></th>
						<th>员工姓名</th>
						<th>所属部门</th>
						<th>职位</th>
						<th>角色</th>
						<th>状态</th>
						<th>操作</th>
					</tr>
				</thead>
				<tbody>
					<tr v-for="one in messages">
						<td>{{one.staffId}}</td>
						<td>{{one.name}}</td>
						<td>{{one.deptName}}</td>
						<td>{{one.position}}</td>
						<td>{{one.roleName}}</td>
						<td v-if="one.staffStatus === 1">在职</td>
						<td v-else>离职</td>
						<td>
							<a href="javascript:void 0;" class="tablelink toStaffInfo" onclick="toStaffInfo(this)">查看详情</a>
							<a href="javascript:void 0;" class="tablelink toUpdate" onclick="toUpdate(this)"> 修改</a>
							<a href="javascript:void 0;" class="tablelink click" id="deleteStaff" onclick="deleteStaff(this)"> 删除</a>
						</td>
					</tr>

				</tbody>
			</table>

			<div class="pagin">
				<div class="message">共<i class="blue">{{pageModel.totalRows}}</i>条记录，当前显示第&nbsp;<i class="blue">{{pageModel.pageNum}}&nbsp;</i>页
				</div>
				<ul class="paginList">
					<li class="paginItem"><a href="javascript:;">
                		<span class="pagepre2 failure1" v-if="pageModel.firstPage" style="pointer-events:none;color:grey;"></span>
						<span class="pagepre" @click="changePageNum(pageModel.pageNum-1)" v-else></span>
					</a></li>
					<li class="paginItem" v-for="num in pageModel.navigatepageNums">
						<a href="javascript:;" v-if="pageModel.pageNum===num" class="failure2">{{num}}</a>
						<a href="javascript:;" @click="changePageNum(num)" v-else>{{num}}</a>
					</li>
					<li class="paginItem"><a href="javascript:;">
						<span class="pagenxt2" v-if="pageModel.lastPage" style="pointer-events:none;color:grey;"></span>
						<span class="pagenxt" @click="changePageNum(pageModel.pageNum+1)" v-else ></span>
					</a></li>
				</ul>
			</div>

			<div class="tip">
				<div class="tiptop"><span>提示信息</span>
					<a></a>
				</div>

				<div class="tipinfo">
					<span><img src="../../../static/images/ticon.png" /></span>
					<div class="tipright">
						<p>是否确认对信息的修改 ？</p>
						<cite>如果是请点击确定按钮 ，否则请点取消。</cite>
					</div>
				</div>

				<div class="tipbtn">
					<input name="" type="button" class="sure" value="确定" />&nbsp;
					<input name="" type="button" class="cancel" value="取消" />
				</div>

			</div>

		</div>

		<script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>

	</body>

</html>


<script type="text/javascript" src="../../../static/js/axios.min.js"></script>
<script type="text/javascript" src="../../../static/js/vue.js"></script>
<script type="text/javascript" src="../../../static/js/sysManage/staffManage/staffList.js"></script>


